import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Table, Popconfirm, Input, Card, Alert, Divider } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './UploadGrade.less';

const EditableCell = ({ editable, value, onChange }) => (
  <div>
    {editable ? (
      <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
    ) : (
      value
    )}
  </div>
);

@connect(({ grade, loading }) => ({
  courseGrade: grade.courseGrade,
  loading: loading.effects['grade/fetchCourseGrade'],
}))
export default class UploadGrade extends PureComponent {
  state = {
    data: [],
  };

  componentDidMount() {
    const { dispatch, location: { state: params } } = this.props;
    dispatch({
      type: 'grade/fetchCourseGrade',
      payload: {
        ...params,
      },
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.courseGrade,
    });
  }

  handleChange(value, key, column) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      target[column] = value;
      this.setState({ data: newData });
    }
  }

  cacheData = this.state.data.map(item => ({ ...item }));

  edit(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      target.editable = true;
      this.setState({ data: newData });
    }
  }
  save(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      delete target.editable;
      this.setState({ data: newData });
      this.cacheData = newData.map(item => ({ ...item }));
    }
  }
  cancel(key) {
    const newData = [...this.state.data];
    const target = newData.filter(item => key === item.key)[0];
    if (target) {
      Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
      delete target.editable;
      this.setState({ data: newData });
    }
  }

  renderColumns = (text, record, column) => {
    return (
      <EditableCell
        editable={record.editable}
        value={text}
        onChange={value => this.handleChange(value, record.key, column)}
      />
    );
  };

  render() {
    const columns = [
      {
        title: '学号',
        dataIndex: 'sno',
        align: 'center',
        width: '15%',
      },
      {
        title: '姓名',
        dataIndex: 'sname',
        align: 'center',
        width: '18%',
      },
      {
        title: '专业班级',
        dataIndex: 'classname',
        align: 'center',
        width: '18%',
      },
      {
        title: '课程名',
        dataIndex: 'cname',
        align: 'center',
        width: '18%',
      },
      {
        title: '课程成绩',
        dataIndex: 'grade',
        align: 'center',
        width: '18%',
        render: (text, record) => this.renderColumns(text, record, 'grade'),
      },
      {
        title: '操作',
        align: 'center',
        dataIndex: 'operation',
        render: (text, record) => {
          const { editable } = record;
          return (
            <div className="editable-row-operations">
              {editable ? (
                <span>
                  <a onClick={() => this.save(record.key)}>保存</a>
                  <Divider type="vertical" />
                  <Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.key)}>
                    <a>取消</a>
                  </Popconfirm>
                </span>
              ) : (
                <a onClick={() => this.edit(record.key)}>编辑</a>
              )}
            </div>
          );
        },
      },
    ];

    return (
      <PageHeaderLayout title="上传成绩">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <Alert message="上传成绩" type="info" showIcon />
            <Fragment>
              <Table bordered dataSource={this.state.data} columns={columns} />
            </Fragment>
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
